import React, { useState } from 'react';
import {
  Box,
  Card,
  CardBody,
  Flex,
  Heading,
  Radio,
  RadioGroup,
  Stack,
  Text,
  Textarea,
  useColorModeValue,
} from '@chakra-ui/react';
import { FaCheckCircle, FaTimesCircle } from 'react-icons/fa';
import { Question } from '../../types';

interface QuestionCardProps {
  question: Question;
  selectedAnswer: string;
  onAnswerSelect: (value: string) => void;
  isDisabled: boolean;
  showFeedback: boolean;
  isCorrect: boolean;
  correctAnswer: string;
  explanation: string;
}

const QuestionCard: React.FC<QuestionCardProps> = ({
  question,
  selectedAnswer,
  onAnswerSelect,
  isDisabled,
  showFeedback,
  isCorrect,
  correctAnswer,
  explanation,
}) => {
  const cardBg = useColorModeValue('white', 'gray.700');
  const borderColor = useColorModeValue('gray.200', 'gray.600');
  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);

  // For drag-and-drop sorting questions
  const handleDragStart = (e: React.DragEvent, index: number) => {
    setDraggedIndex(index);
    e.dataTransfer.setData('text/plain', index.toString());
  };

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
  };

  const handleDrop = (e: React.DragEvent, targetIndex: number) => {
    e.preventDefault();
    const draggedIndex = parseInt(e.dataTransfer.getData('text/plain'));

    if (draggedIndex === targetIndex) return;

    // Create a new array with items reordered
    const items = [...(question.options || [])];
    const [draggedItem] = items.splice(draggedIndex, 1);
    items.splice(targetIndex, 0, draggedItem);

    // Join the sorted items as the answer
    onAnswerSelect(items.join(', '));
    setDraggedIndex(null);
  };

  return (
    <Card bg={cardBg} border="1px" borderColor={borderColor} mb={6}>
      <CardBody>
        <Heading as="h3" size="md" mb={4}>
          {question.question}
        </Heading>

        {question.type === 'multiple-choice' && (
          <RadioGroup onChange={onAnswerSelect} value={selectedAnswer} isDisabled={isDisabled}>
            <Stack direction="column" spacing={3}>
              {question.options?.map((option, index) => (
                <Radio key={index} value={option} colorScheme="brand">
                  {option}
                </Radio>
              ))}
            </Stack>
          </RadioGroup>
        )}

        {question.type === 'fill-in-blank' && (
          <Textarea
            value={selectedAnswer}
            onChange={e => onAnswerSelect(e.target.value)}
            placeholder="Type your answer here..."
            isDisabled={isDisabled}
            rows={3}
          />
        )}

        {/* Remove the drag-sort section since it's not in our Question type */}

        {showFeedback && (
          <Box
            mt={4}
            p={4}
            borderRadius="md"
            bg={isCorrect ? 'green.100' : 'red.100'}
            border="1px"
            borderColor={borderColor}
          >
            <Flex alignItems="center" mb={2}>
              {isCorrect ? <FaCheckCircle color="green" /> : <FaTimesCircle color="red" />}
              <Text fontWeight="bold" ml={2}>
                {isCorrect ? 'Correct!' : 'Incorrect'}
              </Text>
            </Flex>

            {!isCorrect && (
              <Text mb={2}>
                <strong>Correct answer:</strong> {correctAnswer}
              </Text>
            )}

            <Text>{explanation}</Text>
          </Box>
        )}
      </CardBody>
    </Card>
  );
};

export default QuestionCard;
